<script lang="ts" setup>
import pageHeader from "@/components/pageHeader.vue";
import { onMounted, ref, watch, computed } from "vue";
import i18n from "@/i18n";
import { sysMailCaptchaForBindMail, bindEmail } from "@/api/games";
import { showToast } from "vant";
import { useRouter } from "vue-router";
import { getItem, setItem } from "@/utils/utils";

const router = useRouter();
const title = computed(() => i18n.global.t("MeT12"));
const title1 = computed(() => i18n.global.t("WithdrawT21"));
const code = ref("");
const email = ref("");
const isSend = ref(false);
const isGetCode = ref(false);

const getEmailCode = async () => {
  if (isGetCode.value) return;
  if (email.value == "") {
    showToast(i18n.global.t("MeT19"));
    return;
  }
  const res = await sysMailCaptchaForBindMail({ email: email.value });
  isGetCode.value = true;
  isSend.value = true;
  console.log("sysMailCaptchaForBindMail", res.value);
  showToast(i18n.global.t("MeT20"));
};
const doBind = async () => {
  let userInfo = JSON.parse(getItem("userInfo"));
  if (code.value == "") {
    showToast(i18n.global.t("MeT18"));
    return;
  }
  const res = await bindEmail({ email: email.value, captcha: code.value });
  console.log("bindEmail-res", res);
  userInfo.email = email.value;
  setItem("userInfo", JSON.stringify(userInfo));
  if (res.value.status != 0) {
    showToast(res.value.message);
    isGetCode.value = false;
    code.value = "";
    return;
  }

  showToast(i18n.global.t("MeT21"));
  router.back();
};
onMounted(() => {});
</script>

<template>
  <div class="page">
    <mHeader :lineShow="true" />
    <pageHeader>
      <template #title>{{ $t("MeT11") }}</template>
    </pageHeader>
    <div class="content">
      <div class="inputInfo top20">
        <input class="inputs" :placeholder="title" v-model="email" />
        <van-button :disabled="isSend" class="btn" @click="getEmailCode">{{
          i18n.global.t("MeT13")
        }}</van-button>
      </div>
      <div class="inputInfo">
        <input class="inputs" :placeholder="title1" v-model="code" />
      </div>
      <div @click="doBind" class="commitBtn">
        {{ i18n.global.t("MeT17") }}
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import "@/assets/style/constant.scss";
.page {
  width: 100%;
  min-height: 100vh;
  background-color: #1a2c38;
  .content {
    padding: 96 * $_ru 0 * $_ru 20 * $_ru 0 * $_ru;
    .top20 {
      margin-top: 20 * $_ru;
    }
    .commitBtn {
      margin: 50 * $_ru;
      padding: 20 * $_ru;
      background-color: #2e4d6f;
      font-size: 28 * $_ru;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 12 * $_ru;
    }
    .inputInfo {
      display: flex;
      align-items: center;
      font-size: 24 * $_ru;
      background: transparent !important;
      border-bottom: 1 * $_ru solid #0f212e;
      padding: 20 * $_ru;
      color: #fff;
      .btn {
        padding: 0 !important;
        margin: 0 !important;
        height: 24 * $_ru;
        font-size: 24 * $_ru;
        background: transparent !important;
        color: #fff;
        border: none;
      }
      .inputs {
        display: flex;
        flex: 1;
        font-size: 24 * $_ru;
        background: transparent !important;
        color: #fff;
      }
    }
  }
}
</style>